<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>评估</title>
    <link rel="stylesheet" href="../../css/amazeui.css">
    <link rel="stylesheet" href="../../css/weui.css">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />

    <link rel="stylesheet" type="text/css" href="../../css/jquery.datetimepicker.css" />
</head>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body,
    html {
        width: 100%;
        background: #fff !important;
    }

    header {
        text-align: center;
        height: 44px;
        line-height: 44px;
        position: relative;
    }

    .button {
        width: 80%;
        margin: 30px auto;
        display: block;
        outline: none;
        margin-top: 100px;
    }

    .am-input-group-label {
        background: #fff;
        
        border: none;
    }

    .am-form-field {
        border: none;
        text-align: right;
        outline: none;
        padding-right: 16px;
    }
    .am-input-group {
        position: relative;
        padding: 10px;
    }

    .am-input-group::after {
        content: '';
        position: absolute;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: #cccccc;
        left: 0;
        transform: scaleY(0.5);
        z-index: 3
    }
    .am-btn{
    font-size: 18px; 
    color: #fff;
    padding: 10px;
    outline: none;
    border:none;
    }
    .button {
            width: 90%;
            margin: 30px auto;
            display: block;
            outline: none;
            background: #1197ff;
            border-radius: 5px;
            height: 40px;
        }
        
    .am-form-field>input[type="file"]{
        position: absolute;
        top: 0;
        left: 0;
        width:100%;
        height: 100%;
        opacity: 0;
    }
</style>

<body>
    <form action="/url.do" method="post" target="targetIfr" id="form">
        <div class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">借款人姓名：</span>
                <input type="text" class="am-form-field input" name="Name" placeholder="请输入借款人姓名">
            </div>
        </div>
        <div class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">性别：</span>
                <div class="am-form-group am-form-field">
                    <label class="am-radio-inline">
                        <input checked type="radio" value="0" name="Sex"> 男
                    </label>
                    <label class="am-radio-inline">
                        <input type="radio" value="1" name="Sex"> 女
                    </label>
                </div>
            </div>
        </div>
        <div class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">年龄：</span>
                <input type="number" class="am-form-field input" id="nianling" name="Age" placeholder="请输入年龄">
            </div>
        </div>
        <div class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">房屋地址：</span>
                <input type="text" class="am-form-field input" name="Address" placeholder="请输入地址">
            </div>
        </div>
        <div class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">出生日期：</span>
                <input type="text" id="datetimepicker" readonly="readonly" name="Birthday" placeholder="请输入日期" onclick="laydate({istime: true,format:'YYYY-MM-DD'})"
                    class="am-form-field input time">
            </div>
        </div>
        <div class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">产权证号：</span>
                <input type="text" class="am-form-field input" name="LicenseNo" placeholder="请输入产权证号">
            </div>
        </div>
        <div class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">身份证号：</span>
                <input type="text" class="am-form-field input" name="IdCard" placeholder="请输入身份证号">
            </div>
        </div>
        <div class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">借款金额：</span>
                <input type="number" class="am-form-field input " id="jine" name="Money" placeholder="请输入借款金额">
            </div>
        </div>
        <div class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">借款周期：</span>
                <input type="number" class="am-form-field input" id="qixian" name="LoanPeriod" placeholder="请输入借款周期/月">
            </div>
        </div>
        <div class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">抵押顺位：</span>
                <div class="am-form-group am-form-field">
                    <label class="am-radio-inline">
                        <input checked type="radio" value="0" name="Sequence"> 一抵
                    </label>
                    <label class="am-radio-inline">
                        <input type="radio" value="1" name="Sequence"> 二抵
                    </label>
                </div>
            </div>
        </div>
        <div class="list_box yidi">
            <div class="am-input-group">
                <span class="am-input-group-label">一抵剩余本金：</span>
                <input type="text" otype='1' class="am-form-field input yidiinput" name="OddCorpus" placeholder="一抵剩余本金">
            </div>
        </div>
        <div class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">房产证照片1</span>
                <div class="am-form-field">
                    <img src="../../images/xiangji.png" alt="">
                    <input srcImg="" name="PhotoOne" type="file" onchange="ajaxFileUpload(this)" class="PhotoOne">
                </div>
            </div>
        </div>
        <div class="list_box">
            <div class="am-input-group">
                <span class="am-input-group-label">房产证照片</span>
                <div class="am-form-field">
                    <img src="../../images/xiangji.png" alt="">
                    <input srcImg="" name="PhotoTwo" type="file" onchange="ajaxFileUpload(this)" class="PhotoTwo">
                </div>
            </div>
        </div>

        <input type="button" class="button am-btn am-btn-primary" value="提交">
    </form>

    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog">
            <div class="am-modal-hd">警告</div>
            <div class="am-modal-bd cont">
                ---
            </div>
            <div class="am-modal-footer">
                <span class="am-modal-btn">确定</span>
            </div>
        </div>
    </div>

    <script src="../../js/jquery-3.2.1.min.js"></script>
    <script src="../../js/amazeui.js"></script>
    <script src="https://res.wx.qq.com/open/libs/weuijs/1.0.0/weui.min.js"></script>
    <script src="../../js/jquery.datetimepicker.js"></script>
    <script src="../../js/ajaxfileupload.js"></script>
    <style>
        input[readonly="readonly"] {
            background: #fff !important;
        }
    </style>
    <script>
        var myDate = new Date();
        $('.time').val(myDate.toLocaleDateString()).css('border', 'none')

        function ajaxFileUpload(th) {
            $('body').append(`<div style="z-index:99999999999999;top:0;
        left:0;position:fixed;width:100%;height:100%;" class="loidn">
                <div style="width:100%;position:absolute;top:50%;left:0%;text-align:center;transform:translateYs(-50%);">图片上传中...</div>
            </div>`)
            var thisclass = $(th).attr('class');
            num = 0;
            $.ajaxFileUpload({
                url: 'http://zhikewl.s1.natapp.cc/UploadImgs/DoUpload', //用于文件上传的服务器端请求地址
                secureuri: false, //是否需要安全协议，一般设置为false
                fileElementId: $(th), //文件上传域的ID
                dataType: 'json', //返回值类型 一般设置为json
                success: function (data, status) //服务器成功响应处理函数
                {
                    console.log(JSON.stringify(data))
                    $('.loidn').remove()
                    textalert(data.Msg)
                    if (data.State == true) {
                        data2 = data;
                        num = 1
                    }
                },
                error: function (data, status, e) //服务器响应失败处理函数
                {
                    console.log(data);
                    $('.loidn').remove()
                }
            })

            var time = setInterval(function () {
                if (num == 1) {
                    $('.' + thisclass).attr('srcImg', data2.Obj)
                    $('.' + thisclass).parent().find('img').attr('src', '../../images/yes.svg')
                    console.log($('.' + thisclass).attr('srcImg'));
                    clearInterval(time)
                }
            }, 1)
            return false;
        }
        if ($('input[type=radio][name=Sequence]').eq(0).val() == '0') {
            $('.yidiinput').attr('otype', '3')
            $(".yidi").hide()
        }

        //王文涛改
        $('input[type=radio][name=Sequence]').change(function () {
            if (this.value == '0') {
                $('.yidiinput').attr('otype', '3')
                $(".yidi").hide()
            }
            else if (this.value == '1') {
                $('.yidiinput').attr('otype', '1')
                $(".yidi").show()
            }
        });

        // $('#datetimepicker_mask').datetimepicker({
        //     mask: '9999/19/39 29:59'
        // });
        // $('#datetimepicker').datetimepicker();
        // $('#datetimepicker').datetimepicker({
        //     value: '2018/04/15 05:03',
        //     step: 10
        // });
        // $('#datetimepicker').attr('readonly', 'readonly');
        // $('#datetimepicker1').datetimepicker({
        //     datepicker: false,
        //     format: 'H:i',
        //     step: 5
        // });
        var http = localStorage.getItem('http')
        var UserId = localStorage.getItem('UserId')
        var Access_token = localStorage.getItem('Access_token')
        var Refresh_token = localStorage.getItem('Refresh_token');
        console.log(GetQueryString('id'))
        $.ajax({
            type: 'GET',
            headers: {
                "Authorize": Access_token + '|' + Refresh_token,
                "MemberId": UserId
            },
            url: http + '/api/product/GetProductInfo',
            data: {
                keyValue: GetQueryString('id')
            },
            dataType: "json",
            contentType: 'json',
            success: function (data) {
                console.log(JSON.stringify(data));
                LoanAmountMin = data.resultdata.LoanAmountMin;
                LoanAmountMax = data.resultdata.LoanAmountMax;
                LoanTimeMin = data.resultdata.LoanTimeMin;
                LoanTimeMax = data.resultdata.LoanTimeMax;
                RateMin = data.resultdata.RateMin;
                RateMax = data.resultdata.RateMax;
                AgeMin = data.resultdata.AgeMin;
                AgeMax = data.resultdata.AgeMax;
            },
            error: function (err) {
                console.log(JSON.stringify(err));
            }
        })

        $('#showDatePicker').on('click', function () {
            weui.datePicker({
                start: 1990,
                end: new Date().getFullYear(),
                onChange: function (result) {
                    console.log(result);
                },
                onConfirm: function (result) {
                    console.log(result[0] + '-' + result[1] + '-' + result[2]);
                    $('#showDatePicker').text(result[0] + '-' + result[1] + '-' +
                        result[2])
                    time = 123
                }
            });
        });
        $('.button').click(function () {

            $('.button').attr('disabled', 'true');
            //限制
            for (var p = 0; p < $('.input').length; p++) {
                if ($('.input').eq(p)[0].localName == 'input') {
                    if ($('.input').eq(p).val() == '' && $('.input').eq(p).attr('otype') != '3') {
                        var te = $('.input').eq(p).parent().find('span').text()
                        $(".cont").text('请输入' + te.replace('：', ''))
                        $('#my-alert').modal('open')
                        $('.button').removeAttr('disabled')
                        return
                    }
                } else if ($('.input').eq(p)[0].localName == 'div') {
                    if ($('.input').eq(p).text().length == 205) {
                        var te = $('.input').eq(p).parent().find('span').text()
                        $(".cont").text('请选择' + te.replace('：', ''))
                        $('#my-alert').modal('open')
                        $('.button').removeAttr('disabled')
                        return
                    }
                }
            }
            if (Number($('#nianling').val()) < AgeMin) {
                $(".cont").text('年龄不能小于' + AgeMin)
                $('#my-alert').modal('open')
                $('.button').removeAttr('disabled')
                return
            }
            if (Number($('#nianling').val()) > AgeMax) {
                $(".cont").text('年龄不能大于' + AgeMax)
                $('#my-alert').modal('open')
                $('.button').removeAttr('disabled')
                return
            }
            if (Number($('#jine').val()) < LoanAmountMin) {
                $(".cont").text('贷款金额最低' + LoanAmountMin)
                $('#my-alert').modal('open')
                $('.button').removeAttr('disabled')
                return
            }
            if (Number($('#jine').val()) > LoanAmountMax) {
                $(".cont").text('贷款金额最高' + LoanAmountMax)
                $('#my-alert').modal('open')
                $('.button').removeAttr('disabled')
                return
            }
            if (Number($('#qixian').val()) < LoanTimeMin) {
                $(".cont").text('最低贷款期限' + LoanTimeMin)
                $('#my-alert').modal('open')
                $('.button').removeAttr('disabled')
                return
            }
            if (Number($('#qixian').val()) > LoanTimeMax) {
                $(".cont").text('最高贷款期限' + LoanTimeMax)
                $('#my-alert').modal('open')
                $('.button').removeAttr('disabled')
                return
            }
            for (var i = 0; i < $('input[type="file"]').length; i++) {
                if ($('input[type="file"]').eq(i).attr('srcImg') == "") {
                    var te = $('input[type="file"]').eq(i).parent().parent().find('span').text()
                    console.log(te)
                    $(".cont").text('请上传' + te.replace('：', ''))
                    $('#my-alert').modal('open')
                    $('.button').removeAttr('disabled')
                    return
                }
            }
            //开始拼接数据
            var obj = {}
            for (var i = 0; i < $('.input').length; i++) {
                var Name = $('.input').eq(i).attr('name');
                if ($('.input').eq(i)[0].localName == 'input') {
                    obj[Name] = $('.input').eq(i).val()
                } else {
                    obj[Name] = $('.input').eq(i).text()
                }
            }

            for (var lpl = 0; lpl < $('input[type="radio"]').length; lpl++) {
                if ($('input[type="radio"]').eq(lpl).prop('checked') == true) {
                    var lpltext = $('input[type="radio"]').eq(lpl).val()
                    var lplname = $('input[type="radio"]').eq(lpl).attr('name')
                    if (lplname == 'Sex') {
                        if (lpltext == '0') {
                            lpltext = true;
                        } else {
                            lpltext = false;
                        }
                    }
                    obj[lplname] = lpltext
                }
            }
            for (var p = 0; p < $('input[type="file"]').length; p++) {
                var Name = $('input[type="file"]').eq(p).attr('name');
                var srcImg = $('input[type="file"]').eq(p).attr('srcImg');
                obj[Name] = srcImg
            }
            obj['ProductId'] = GetQueryString('id');
            obj['MemberId'] = UserId;
            if ($('.yidiinput').attr('otype') == 3) {
                // obj['OddCorpus']=null
            }
            console.log(JSON.stringify(obj))
            $.ajax({
                url: http + '/api/product/SaveOrder',
                type: "POST",
                headers: {
                    "Authorize": Access_token + '|' + Refresh_token,
                    "MemberId": UserId
                },
                data: obj,
                success: function (data) {
                    console.log(JSON.stringify(data))
                    $('.button').removeAttr('disabled')
                    textalert(data.message)
                    if (data.type == 1) {
                        window.location.href = "../dingfan.html"
                    }
                },
                error: function (err) {
                    console.log(JSON.stringify(err))
                    $('.button').removeAttr('disabled')
                }
            })
        })


        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return unescape(r[2]);
            return null;
        }

        function textalert(text) {
            $('body,html').css('width', '100%').css('height', '100%');
            var dome =
                `<div style="text-align:center;position:absolute;top:50%;transform:translate(-50%,-50%);border-radius: 5px;background: rgba(0,0,0,0.5);padding: 0.2rem;left: 50%;z-index:9999999999999999999999999;" class="mask_boxcontent">
          <p style="margin:0;color:#fff;">${text}</p>
        </div>`
            $('body').append(dome);
            setTimeout(function () {
                $('.mask_boxcontent').fadeOut(500);
                setTimeout(function () {
                    $('.mask_boxcontent').remove();
                }, 500)
            }, 2000)
        }
    </script>
</body>

</html>